[#ftl]
[@define "agile.BoxShadowEditor","agile._MetadataEditor,agile.MultiItemEditorListener"]
	[#assign templateString][#compress]	
	<table cellspacing="3px">
	<tr>
		<td valign="top" nowrap="true" title="{i18n_box_shadow_tooltip}" class="tooltip">
			<div style="margin-top:5px;">{i18n_box_shadow}</div>
			<div data-dojo-attach-point="previewShadow" style="margin-top:20px;margin-left:5px;width:50px;height:50px;background-color:#f0f0f0"></div>			
		</td>	
		<td valign="top">
		<div data-dojo-type="agile.MultiItemEditor" data-dojo-attach-point="itemEditor">
			<table cellspacing="3px">
			<tr>				
				<td>
				 	<div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-attach-point="hShadow" data-dojo-props='options:"0",unit:"px",width:"60px",name:"hShadow",defValue:"0px",required:true,placeHolder:"{i18n_x_shadow}"' title="{i18n_x_shadow_tooltip}"></div>
				</td>
				<td>
					<div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-attach-point="vShadow" data-dojo-props='options:"0",unit:"px",width:"60px",name:"vShadow",defValue:"0px",required:true,placeHolder:"{i18n_y_shadow}"' title="{i18n_y_shadow_tooltip}"></div>
				</td>
				<td>
					<div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-attach-point="blur" data-dojo-props='options:"+0",unit:"px",width:"60px",name:"blur",defValue:"0px",required:true,placeHolder:"{i18n_blur}"' title="{i18n_blur_tooltip}"></div>
				</td>
				<td>
					<div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-attach-point="spread"  data-dojo-props='options:"0",unit:"px",width:"60px",name:"spread",defValue:"0px",required:true,placeHolder:"{i18n_spread}"' title="{i18n_spread_tooltip}"></div>
				</td>			
				<td valign="centre">
					<div data-dojo-type='agile.ColorSelector' class="editor" data-dojo-attach-point="color" data-dojo-props='name:"color",defValue:"#000000",required:true' title="{i18n_shadow_color_tooltip}"></div>
				</td>
				<td>
					<div data-dojo-type='agile.NumberComboBox' class="editor" data-dojo-attach-point="style" data-dojo-props='options:"{i18n_inset}",valueWidget:"checkbox",name:"style"' title="{i18n_shadow_style_tooltip}"></div>
				</td>
			</tr>
			</table>  
		</div>	
		</td>
	</tr>
	</table> 
	[/#compress][/#assign]
	templateString:"${templateString?js_string}",htmlName:"box-shadow",name:"boxShadow"
	,init:function(){		
		this.itemEditor.listener = this;
	}
	,onItemEdited:function(item){
		//summary: call-back when an item is being edited
		style.set(this.previewShadow,agile.adviseCssName4Js(this.htmlName),item.innerHTML);		
	}
	,onItemSelected:function(items){	
		//preview the shadows
		var shadow = "";
		array.forEach(items,function(item){
			shadow += item.innerHTML + ",";
		})
		if(shadow){//remove the last item delimeter
			shadow = shadow.substring(0,shadow.length - 1);
 		}
		style.set(this.previewShadow,agile.adviseCssName4Js(this.htmlName),shadow);								
	}
	,onValueChanged:function(value){
		//summary: call-back when the itemStore(MultiSelect) value is changed
		this.onChange(value,null,this.htmlName);
	}
	,reset1:function(name,value){
		if(name == "value"){			
			this.itemEditor.reset1("value",value[this.htmlName]);
		}else if(name == "disabled" || name == "readOnly"){
			this.itemEditor.reset1(name,value);	
		}else{
			this.inherited(arguments);
		}
	}
	,isValid:function(){	
		return this.itemEditor.isValid();
	}
[/@]
